<template>
  <view class="vehicle-binding vehicle-add">
    <none-data v-if="vehicleData.length == 0" />
    <vehicle
      v-for="item in vehicleData"
      :key="item.id"
      :id="item.id"
      :name="item.carType"
      :item="item"
      @on-click="deleteImplement"
    ></vehicle>
    <view class="tail" v-if="vehicleData.length !== 0">
      {{ tailText }}
    </view>
    <view class="room-btn">
      <button @click="addVehicle" class="btn" form-type="submit">添加</button>
    </view>

    <up-modal
      :show="modalShow"
      title="操作确认"
      content="是否移除该车辆信息？"
      :showCancelButton="true"
      @confirm="deleteCarBind"
      @cancel="modalShow = false"
    ></up-modal>
  </view>
</template>

<script setup>
import { customNav } from "@/utils/customNav";
import {
  CarBindListApi,
  deleteCarBindApi,
} from "@/package_kuafu_apartment/pages/api/vehicle";
import vehicle from "@/package_kuafu_apartment/pages/my/components/cohabitation-item/vehicle.vue";
import { onMounted, ref } from "vue";
import { onReachBottom, onShow } from "@dcloudio/uni-app";
const modalShow = ref(false);
const tailText = ref("");
const vehicleData = ref([]);
const total = ref(0);
const identifier = ref(0);
const pageData = ref({
  page: 1,
  size: 15,
});
async function CarBindList() {
  let res = await CarBindListApi(pageData.value);
  console.log(res);
  vehicleData.value = res.data.records;
  total.value = res.data.total;
  if (total.value !== vehicleData.value.length) {
    tailText.value = "下滑加载更多";
  } else {
    tailText.value = "没有更多内容";
  }
}
function addVehicle() {
  customNav("vehicle-add?type=新增");
}
function deleteImplement(id) {
  modalShow.value = true;
  identifier.value = id;
}
async function deleteCarBind() {
  let res = await deleteCarBindApi(identifier.value);
  console.log(res);
  if (res.code == 200) {
    uni.showToast({
      icon: "success",
      title: res.msg,
      duration: 2000,
    });
    modalShow.value = false;
    pageData.value.page = 1;
    CarBindList();
  } else {
    uni.showToast({
      icon: "none",
      title: res.msg,
      duration: 2000,
    });
    modalShow.value = false;
  }
}
onReachBottom(() => {
  if (total.value !== vehicleData.value.length) {
    pageData.value.page++;
    CarBindList();
  }
});
onMounted(() => {
  CarBindList();
});
onShow(() => {
  pageData.value.page = 1;
  CarBindList();
});
</script>

<style lang="less" scoped>
@import url(./style/vehicle-add.less);
.vehicle-binding {
  padding-top:  0;
}
</style>